<template>
	<div ref="scroll" class="wrapper" :style="{'width':width,'height':height,'background':background}">
		<div>
			<slot></slot>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import $ from '~public/js/jq.js'
	
	export default{
		data(){
			return {
				scroll:null
			}
		},
		props:['width','height','background','prototype'],
		computed:{
			width(){
				return this.$props.width+'px'
			},
			height(){
				return this.$props.height+'px'
			},
			background(){
				return this.$props.background
			}
		},
		methods:{
			move(x,y,time=300){
				this.scroll.scrollTo(x,y,time)
			}
		},
		mounted(){
			this.scroll=new BScroll(this.$refs.scroll,{
				probeType:this.$props.prototype||0,
			}).
			on('scroll',position=>{
					this.$emit('backTop',position)
			})
		}
	}
	
</script>

<style scoped>
	.wrapper{
		position: relative;
		overflow: hidden;
	}
</style>
